<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form表单</title>
</head>
<body>
<h1>验证表单对象是否为空</h1>
<form action="" name="form1">
用户名：
<input name="name" type="text" /> <br>
密码：
<input name="pwd" type="password" /> <br>
<input type="button" onclick="return checkinput()" value=注册 />
<input type="button" onclick="form.reset();return false" value=取消 />
</form>
<script>
function checkinput() {
    if (form1.name.value==``) {
        alert(`请输入用户名`);
        return false;
    }
    if (form1.pwd.value=``) {
        alert(`请输入密码`);
        return false;
    }
    return true;
}
</script>
    
<h1>模拟自动取票的取票功能，判断输入的取票码是否正确</h1>
<form action="" name="form2">
取票码：
<input type="text" name="codes"/>
<input type="submit" onclick="return cheppp(form2)" value="取票">
<input type="reset" value="重输入">
</form>
<script>
const tickcode=`333211`;
function cheppp(form) {
    let codes=form.codes.value;
    if (codes==``) {
        alert(`为空怎么取？`);
        return false;
    }else if (codes!=tickcode) {
        alert(`取票码不对`);
        return false;
    }else{
        alert(`取票成功`);
        return true;
    }
}
</script>

<h1>对录入框中的字数进行限制，超出进行提示</h1>
<form action="" name="form3">
标题：
<input type="text" name="zz1" onblur="checktit()" > <br>
内容：
<textarea name="zz2" id="zz2" cols="30" rows="10" onblur="checkcons()"></textarea>
</form>
<script>
function checktit() {
    let tits=document.form3.zz1.value;
    if (tits.length>10) {
        alert(`标题字数不能超过10个字`);
        return false;
    }
}
function checkcons() {
    let cons=document.form3.zz2.value;
    if (cons.length>10) {
        alert(`内容字数不能超过20个字`);
        return false;
    }
}
</script>

<h1>获取表单元素值</h1>
<form action="" name="form4" onsubmit="return rrsn()">
作者姓名：
<input type="text" name="a1" /> <br>
文章主题：
<input type="text" name="a2" /> <br>
内容简介：
<textarea name="a3" id="a3" cols="30" rows="10"></textarea>
<input type="submit" name="add" id="add" value="添加">
</form>
<script>
function rrsn() {
    let oks=`获取内容如下：\n`;
    oks+=`作者名称:`+document.form4.a1.value+`\n`+document.form4.a2.value+`\n`+document.form4.a3.value+`\n`;
    alert(oks);

}
</script>

<h1>动态调整文本框大小</h1>
<form action="" name="form5">
<input type="button" value="+" onclick="resize(`bigg`)">
<input type="button" value="-" onclick="resize(`xiao`)">
<textarea name="cons" cols="10" row="5"></textarea>
</form>
<script>
function resize(params) {
    if (params==`bigg`) {
        if (form5.cons.rows<20) {
            form5.cons.rows+=2;
        }
    }else if (params==`xiao`) {
        if (form5.cons.rows>5) {
            form5.cons.rows-=2;
        }
    }
}
</script>

<h1>复选按钮的使用-获取用户勾选信息</h1>
<form action="" name="form6" onSubmit="getInfos()">
姓名：
<input type="text" name="b1" > <br>
性别：
<input type="radio" name="sex" value="男">男 
<input type="radio" name="sex" value="女">女  <br>
爱好：
<input type="checkbox" name="interset" value="看电影" />看电影
<input type="checkbox" name="interset" value="听音乐" />听音乐
<input type="checkbox" name="interset" value="演奏乐器" />演奏乐器
<input type="checkbox" name="interset" value="踢足球" />踢足球
<input type="checkbox" name="interset" value="写代码" />写代码
<input type="checkbox" name="interset" value="唱红哥" />唱红哥
<input type="checkbox" name="interset" value="马拉松" />马拉松 <br>
自我评价：
<textarea name="b2" id="" cols="30" rows="10"></textarea> <br>
<input type="submit" name="submit" value="提交" />
</form>
<script>
function getInfos() {
    let meassgeP=``;
    meassgeP+=`姓名：`+form6.b1.value+`\n`;
    // meassgeP+=`性别：`+form6.sex.value+`\n`;
    meassgeP+=`性别：`;
    for (let i = 0; i < form6.sex.length; i++) {
        if(form6.sex[i].checked){
        meassgeP+=form6.sex[i].value+`\n`;
      }
    }
    meassgeP+=`爱好：`;
    for (let i = 0; i < form6.interset.length; i++) {
        if (form6.interset[i].checked) {
            meassgeP+=form6.interset[i].value+` `;
        }
    }
    meassgeP+=`\n自我评价：`+form6.b2.value;
    alert(meassgeP);
}
</script>

<h1>模拟查话费</h1>
<form action="" name="form7" onsubmit="getchahh()">
选择查询类别：
<input type="radio" name="sex" value="查话费">查话费 
<input type="radio" name="sex" value="查流量">查流量 
<input type="submit" name="submit" value="查询">
</form>
<script>
function getchahh() {
    if (form7.sex.value==`查话费`) {
        alert(`你手机还有话费金额：200元`);
    }
    if (form7.sex.value==`查流量`) {
        alert(`宽带流量已经不足！`);
    }
}
</script>

<hr>复选框最大数控制-最多只能选4个
<form action="" name="form8">
    请选择课程 ：
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="语文课" />语文课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="英语课" />英语课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="数学课" />数学课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="物理课" />物理课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="政治课" />政治课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="化学课" />化学课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="生物课" />生物课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="体育课" />体育课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="手工课" />手工课
    <input type="checkbox" onclick="seleii(this)" name="intkeke" value="厨艺课" />厨艺课
</form>
<script>
function seleii(les) {
    var connn=0;
    for (let i = 0; i < form8.intkeke.length; i++) {
        if (form8.intkeke[i].checked) {
            connn++;
        }
    }
    if (connn>4) {
        alert(`最多只能选4个`);
        for (let i = 0; i < form8.intkeke.length; i++) {
            if (form8.intkeke[i].value==les.value) {
                form8.intkeke[i].checked=``;
            }
        }
    }
}
</script>


</body>
</html>